<template>
  <div class="layout">
    <!-- 头部 -->
    <header class="header">
      <div class="system-title">企业员工管理系统</div>
      <div class="date-slogan">
        {{ currentDate }} 星期{{ weekMap[new Date().getDay()] }}<br />
        标语：高效办公，从这里开始
      </div>
      <div class="header-switch">
        <el-switch v-model="switchValue" size="large" />
      </div>
    </header>

    <!-- 主体：侧边栏 + 内容 -->
    <div class="main">
      <!-- 侧边栏 -->
      <aside class="sidebar">
        <div
          class="menu-item home-item"
          :class="{ active: $route.path.includes('home') }"
          @click="$router.push('/userManager/home')"
        >
          首页
        </div>
        <div
          class="menu-item menu-main"
          :class="{ active: $route.path.includes('employee') }"
          @click="$router.push('/userManager/employee')"
        >
          员工管理
        </div>
        <div
          class="menu-item menu-main"
          :class="{ active: $route.path.includes('leave') }"
          @click="$router.push('/userManager/leave')"
        >
          请假管理
        </div>
        <div
          class="menu-item menu-main"
          :class="{ active: $route.path.includes('attendance') }"
          @click="$router.push('/userManager/attendance')"
        >
          考勤管理
        </div>
       
        <div
          class="menu-item menu-main"
          :class="{ active: $route.path.includes('offboarding') }"
          @click="$router.push('/userManager/offboarding')"
        >
          离职办理
        </div>
        <div class="menu-item logout" @click="logout">Log out</div>
      </aside>

      <!-- 内容区域 -->
      <main class="content">

      <router-view :key="$route.fullPath" />
      </main>
    </div>

    <!-- 底部 -->
    <footer class="footer">
      <div class="footer-icon">▼</div>
    </footer>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const switchValue = ref(true);

const weekMap = ["日", "一", "二", "三", "四", "五", "六"];

// 格式化当前日期
const currentDate = computed(() => {
  const date = new Date();
  return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
});

// 判断首页是否激活
const isHomeActive = computed(() => {
  const path = router.currentRoute.value.path;
  return path === '/userManager' || path === '/userManager/home' || 
         (path.includes('/userManager') && !path.includes('employee') && 
          !path.includes('leave') && !path.includes('attendance') && 
          !path.includes('onboarding') && !path.includes('offboarding'));
});

// 退出登录
const logout = () => {
  localStorage.removeItem("token");
  router.push("/login");
};
</script>

<style scoped>
.layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  height: 60px;
  background: linear-gradient(to right, #7bc8ff 0%, #165dff 100%);
  color: #fff;
  flex-shrink: 0;
}

.system-title {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
}

.date-slogan {
  flex: 1;
  text-align: center;
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
}

.header-switch {
  display: flex;
  align-items: center;
}

.main {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.sidebar {
  width: 150px;
  background: #fafafa;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #e0e0e0;
  flex-shrink: 0;
}

.menu-item {
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  border-bottom: 1px solid #e8e8e8;
}

.menu-item.home-item {
  color: #999;
  font-size: 14px;
  padding: 12px;
  margin-top: 10px;
}

.menu-item.menu-main {
  color: #ff3333;
  font-size: 16px;
  font-weight: bold;
  padding: 20px 16px;
}

.menu-item.menu-main.active {
  background-color: #fff;
  border-right: 3px solid #ff3333;
}

.menu-item.menu-main:hover {
  background-color: #fff;
}

.menu-item.logout {
  margin-top: auto;
  color: #999;
  font-size: 14px;
  border-top: 1px solid #e8e8e8;
  padding: 16px;
}

.menu-item.logout:hover {
  background-color: #fff;
}

.content {
  flex: 1;
  padding: 20px;
  background: #fff;
  overflow: auto;
}

.footer {
  height: 30px;
  background-color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.footer-icon {
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  transform: scale(0.8);
}
</style>